@@include('../00.global/include-header.html')
     
  <body class="page">
  
  
          
    @@include('../00.global/include-loader.html')
    
    

  
   
    <div class="wrapper">
    
        <!-- Header Area
        ============================================= -->      
        <header class="header-area transition">
            
             <div class="header-container transition">
                 <div class="container">
                 
                        @@include('../00.global/include-brand.html')
                        
                        @@include('../00.global/include-menu.html')
                        
                        
                        
                        
                  </div>
                  <!-- .container end -->
                  
                  <div class="clear"></div>
             </div>
        
        </header>
        <div class="header-inner auto-height"></div>
      
      
     
        <!-- Title
        ====================================================== -->
        <section class="space-sm">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Full Width & Custom CSS3 Transition Animation</h2>
							<p>Note: Touch-friendly Drag and Drop</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
       <!-- Slideshow
        ====================================================== -->
        <div class="custom-theme-flexslider custom-primary-flexslider" 
             data-draggable="true" 
             data-mynavthumbs="false"
             data-mycontrols="false"
             data-myshow="false"
             data-mycounttotal="false"
             data-mycountcur="false"
             data-myparallax="false"
             data-wheel="false"
             data-speed="600" 
             data-timing="10000" 
             data-loop="false" 
             data-paging="true" 
             data-arrows="true" 
             data-animation="slide" 
             data-auto="true" 
			 data-prev="<i class='fa fa-chevron-left custom-primary-flexslider-prev'></i>" 
             data-next="<i class='fa fa-chevron-right custom-primary-flexslider-next'></i>">
           
            <div class="custom-theme-slides">

                <div class="item">
                    <img src="assets-demo/images/slide-1.jpg" alt="Title 1" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <h2 class="level level-1">Beautiful Free &amp; Premium Responsive WordPress Themes</h2>
                                        <p class="h5 font-normal level level-2">Uix Responsive Web UI Frameworks</p>
    
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end -->   
                    
                </div>
                
                <div class="item">
                    <img src="assets-demo/images/slide-2.jpg" alt="Title 2" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                    
                                        <h2 class="level level-1">Hello World</h2>
                                        <p class="h5 font-normal level level-2">UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
                                        <a class="button button-hover button-border-medium button-size-s level level-3" href="#">View Demo</a>
    
                                 
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end -->
                     
                </div>
                
                
                <div class="item">
                    <img src="assets-demo/images/slide-3.jpg" alt="Title 3" />
                    
                    <div class="slides-info">
                    
                        <div class="container t-c">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                    
                                        <h2 class="level level-1">Title 3</h2>
                                        <p class="h5 font-normal level level-2">UIUX Lab carefully crafts original design assets and publishes articles about UI/UX trends!</p>
                                        <a class="button button-hover button-border-medium button-size-s level level-3" href="#">View Demo</a>
    
                                 
                                    </div>
                                </div>
                                <!-- .row end -->
                        </div>


                    </div>
                    <!-- .slides-info  end --> 
                    
                </div>
    

            </div>
            <!-- .custom-theme-slides end -->
        </div>
        <!-- .custom-theme-flexslider end -->

           
           
        <!-- Title
        ====================================================== -->
        <section class="space-sm">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Parallax Effect</h2>
                            <p>Set the <code>data-myparallax</code> property to make parallax effect.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
       <!-- Slideshow
        ====================================================== -->
        <div class="custom-theme-flexslider custom-parallax-flexslider" 
             data-draggable="true" 
             data-mynavthumbs="false"
             data-mycontrols="false"
             data-myshow="false"
             data-mycounttotal="false"
             data-mycountcur="false"
             data-myparallax="true"
             data-wheel="false"
             data-speed="1500" 
             data-timing="10000" 
             data-loop="false" 
             data-paging="true" 
             data-arrows="false" 
             data-animation="slide" 
             data-auto="true" 
			 data-prev="<i class='fa fa-chevron-left'></i>" 
			 data-next="<i class='fa fa-chevron-right'></i>"> 
           
            <div class="custom-theme-slides">

                <div class="item">
                    <img src="assets-demo/images/slide-1.jpg" alt="Title 1" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                    
                </div>
                
                <div class="item">
                    <img src="assets-demo/images/slide-2.jpg" alt="Title 2" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                     
                </div>
                
                
                <div class="item">
                    <img src="assets-demo/images/slide-3.jpg" alt="Title 3" />
					<img class="level level-1" src="assets-demo/images/300x250.png" alt="">
					<img class="level level-2" src="assets-demo/images/500x300.png" alt="">
                    
                </div>
    

            </div>
            <!-- .custom-theme-slides end -->
        </div>
        <!-- .custom-theme-flexslider end -->  
           
            
     
        <!-- Title
        ====================================================== -->
        <section class="space-none-bottom">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Default Options</h2>
							<p>Special Options Using <code>data-*</code> Attributes</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
     
      
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>
      
      

     
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
                            <h2>Video Slider</h2>
                            <p>Set the <code>data-embed-video-wrapper</code> property to listen for video play events.</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
     
      
       <!-- Slideshow With Video
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider" 
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="20000" 
										 data-loop="false" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"
                                         data-embed-video-wrapper="true"> 
                                       
                                        <div class="custom-theme-slides">
                            
                                            
                                            <div class="item">
												  <div class="web-video-embed" data-embed-video-width="auto" data-embed-video-height="auto" data-embed-video-controls="false" data-embed-video-autoplay="true" data-embed-video-loop="true">
													  <video id="video-demo-1" class="video-js vjs-default-skin" controls poster="assets-demo/videos/demo.jpg">
														  <source src="assets-demo/videos/1920x1080/demo.mp4" type="video/mp4">
														  <source src="assets-demo/videos/1920x1080/demo.webm" type="video/webm">
													  </video>
												  </div>
                                                
                                                
                                            </div>
                                            
                                            
                                            
                                            <div class="item">
												  <div class="web-video-embed" data-embed-video-width="auto" data-embed-video-height="auto" data-embed-video-controls="false" data-embed-video-autoplay="true" data-embed-video-loop="true">
													  <video id="video-demo-2" class="video-js vjs-default-skin" controls poster="assets-demo/videos/demo.jpg">
														  <source src="assets-demo/videos/1440x1050/demo.mp4" type="video/mp4">
														  <source src="assets-demo/videos/1440x1050/demo.webm" type="video/webm">
													  </video>
												  </div>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>
      
      
      
           
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Custom Navigation Buttons</h2>
                            <p>Set the <code>data-mycontrols</code> property to be used in lieu of dynamic controlNav.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
        
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols=".my-nav-1"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   
                                    
                                       
                                    <div class="custom-navigation my-nav-1">
                                        <a href="#" class="custom-theme-flex-prev"><i class="fa fa-chevron-left"></i></a>
                                        <div class="custom-controls-container my-nav-1"></div>
                                        <a href="#" class="custom-theme-flex-next"><i class="fa fa-chevron-right"></i></a>
                                    </div> 

                        
                        
                        </div>
                    </div>
              </div>   
      
      </section>    
            
        
           
            
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Multiple Items</h2>
							<p>Set the <code>data-myshow</code> property to control the number of items displayed.</p>
                            
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider custom-itemgrid"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="3"
										 data-mycounttotal="false"
										 data-mycountcur="false" 
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                      	 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                        
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   

                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>        
                    
                    
                    
            
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Add Counter</h2>
                            <p>Set the <code>data-mycounttotal</code> and <code>data-mycountcur</code> property to display counter.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>          
                    
                    
               
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs="false"
										 data-mycontrols="false"
										 data-myshow="false"
										 data-mycounttotal="p.count em.count"
										 data-mycountcur="p.count em.current"
										 data-myparallax="false"
										 data-wheel="true"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="true" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 	 
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   


									<p class="count">
										<em class="current"></em> of <em class="count"></em>
									</p>   
                        
                        
                        </div>
                    </div>
              </div>    
        
      
      </section>        
                                                   
           
           
        <!-- Title
        ====================================================== -->
        <section class="space-none">
            <div class="container t-c">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 t-c">
							<h2>Thumbnail ControlNav Pattern</h2>
                            <p>Set the <code>data-mynavthumbs</code> property to match a simple pattern.</p>
                        </div>
                    </div>
                    <!-- .row end -->
              
                    
            </div>
            <!-- .container end -->
 
        </section>
        
            
            
       <!-- Slideshow
        ====================================================== -->
        <section>
             <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                        
                                    <div class="custom-theme-flexslider"
										 data-draggable="false" 
										 data-mynavthumbs=".my-navthumbs-1"
										 data-mycontrols=".my-nav-2"
										 data-myshow="false"
										 data-mycounttotal="false"
										 data-mycountcur="false"
										 data-myparallax="false"
										 data-wheel="false"
										 data-speed="600" 
										 data-timing="10000" 
										 data-loop="false" 
										 data-paging="true" 
										 data-arrows="true" 
										 data-animation="slide" 
										 data-auto="true" 
										 data-prev="<i class='fa fa-chevron-left'></i>" 
										 data-next="<i class='fa fa-chevron-right'></i>"> 
                                       
                                       
                                        <div class="custom-theme-slides">
                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-1.jpg" alt="Title 1" /></a>  
                                            </div>
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-2.jpg" alt="Title 2" /></a>
                                            </div>
                                            
                                            
                                            <div class="item">
                                                <a href="#" rel="theme-slider-prettyPhoto[cat-1]"><img src="assets-demo/images/test-img-big-3.jpg" alt="Title 3" /></a>
                                            </div>
                                
                            
                                        </div>
                                        <!-- .custom-theme-slides end -->
                                    </div>
                                    <!-- .custom-theme-flexslider end -->   
                                    
                                       
                                    <div class="custom-navigation my-nav-2">
                                        <a href="#" class="custom-theme-flex-prev"><i class="fa fa-chevron-left"></i></a>
                                        <div class="custom-controls-container my-nav-2"></div>
                                        <a href="#" class="custom-theme-flex-next"><i class="fa fa-chevron-right"></i></a>
                                    </div> 

                        
                                    <!-- Thumbnail ControlNav Pattern -->
                                    <div class="custom-theme-flexslider-thumbs my-navthumbs-1">
 										<ul>
											<li class="active"><img src="assets-demo/images/test-img-big-1.jpg" alt="" /></li>
											<li><img src="assets-demo/images/test-img-big-2.jpg" alt="" /></li>
											<li><img src="assets-demo/images/test-img-big-3.jpg" alt="" /></li>
										</ul>
							        </div>

                        
                        
                        </div>
                    </div>
              </div>   
      
      </section>    
                                        
                                          
                                
        @@include('../00.global/include-copyright.html')
        
        
    </div>
    <!-- .wrapper end -->
       
       
    @@include('../00.global/include-footer.html')

